import { type FC, Fragment } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useSafeState, useMemoizedFn } from 'ahooks';
import { Form, Input, Row, Col } from 'antd';
import CardLayout from '@/components/CardLayout';
import { signUp } from '@/libs/cognitoClient';
import styles from './styles.module.less';

const Signin: FC = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [loading, setLoading] = useSafeState(false);

  const onSignin = useMemoizedFn(async () => {
    signUp({
      userName: '578091306@qq.com',
      password: 'Huaxin19jt.'
    })
  });

  return (
    <CardLayout
      title="Create your account"
      buttonText="Create an account & Login"
      onSubmit={onSignin}
      subTitle={
        <Fragment>
          Already have an account?
          <Link to="/signin">Log in</Link>
        </Fragment>
      }
    >
      <Form
        size="large"
        form={form}
        className={styles.form}
      >
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item>
              <Input placeholder="First name" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item>
              <Input placeholder="Last name" />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item name="userName">
          <Input placeholder="Email address" />
        </Form.Item>
        <Form.Item name="password">
          <Input placeholder="Password" />
        </Form.Item>
      </Form>
    </CardLayout>
  );
}

export default Signin;